<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="tableMain" style="margin-top: 20px">
      <div class="form">
        <el-form :inline="true" :model="ruleForm1" ref="ruleForm" >
          <el-form-item label="学生名:">
            <el-input v-model="ruleForm1.relName" placeholder="请输入学生姓名"></el-input>
          </el-form-item>
          <el-form-item label="学生类型:">
            <el-select v-model="ruleForm1.type" placeholder="请输入学生类型">
              <el-option label="请选择" value="-1"></el-option>
              <el-option label="普通" value="0"></el-option>
              <el-option label="尊贵" value="1"></el-option>
              <el-option label="黑卡" value="2"></el-option>
              <el-option label="至上" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生专业:">
            <el-input v-model="ruleForm1.specialized" placeholder="请输入学生专业"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search('ruleForm')">搜索</el-button>
            <el-button type="primary" @click="insertBefore1()">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
        :cell-style="rowStyle"
        :header-cell-style="{'text-align':'center'}">
        <el-table-column
          prop="id"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="relName"
          label="真实姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="specialized"
          label="专业"
          width="150">
        </el-table-column>
        <el-table-column
          prop="stutyTime"
          label="学习时间(min)"
          width="150">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="加入时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="sorce"
          label="积分"
          width="150">
        </el-table-column>
        <el-table-column
          prop="vip"
          label="vip等级"
          width="150">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 0"><span>普通</span></el-tag>
            <el-tag v-if="scope.row.type == 1" type="warning"><span>尊贵</span></el-tag>
            <el-tag v-if="scope.row.type == 2" type="info"><span>黑卡</span></el-tag>
            <el-tag v-if="scope.row.type == 3" type="danger"><span>至上</span></el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status==0"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="vipEnd"
          label="vip到期时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="150">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          @current-change="closeDialog"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title=addtitle :visible.sync="dialogFormVisible" :show-close=close >
      <el-form :model="form"  ref="form" >
        <el-form-item label="真实姓名:" label-width="100px">
          <el-input v-model="form.relName" autocomplete="off" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学生专业:" label-width="100px">
          <el-select v-model="form.specialized" placeholder="请选择专业类型" >
            <el-option value="Computer Science"></el-option>
            <el-option value="Mathematics"></el-option>
            <el-option value="History"></el-option>
            <el-option value="Biology"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学习时间:" label-width="100px">
          <el-input v-model="form.stutyTime" autocomplete="off" placeholder="请输入学生学习时间"></el-input>
        </el-form-item>
        <el-form-item label="加入时间:" label-width="100px">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.createTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="学习积分:" label-width="100px">
          <el-input v-model="form.sorce" autocomplete="off" placeholder="请输入学生积分"></el-input>
        </el-form-item>
        <el-form-item label="Vip等级:" label-width="100px">
          <el-select v-model="form.vip" placeholder="请选择vip等级" >
            <el-option value="Gold"></el-option>
            <el-option value="Platinum"></el-option>
            <el-option value="Silver"></el-option>
            <el-option value="Bronze"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生类型:" label-width="100px">
          <el-select v-model="form.type" placeholder="请选择学生类型" >
            <el-option label="普通" value="0">普通</el-option>
            <el-option label="尊贵" value="1">尊贵</el-option>
            <el-option label="黑卡" value="2">黑卡</el-option>
            <el-option label="至上" value="3">至上</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生状态:" label-width="100px">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="Vip到期时间:" label-width="100px">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.vipEnd" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注:" label-width="100px">
          <el-input v-model="form.remarks" placeholder="请输入备注" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog(1)">取 消</el-button>
        <el-button type="primary" @click="edit(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {save, deleteById, getStudent, updateById} from "../../api/student";

export default {
  data(){
    return{
      ruleForm1:{
        relName:'',
        type:'',
        specialized:''
      },
      dialogFormVisible:false,
      addtitle:'修改学生信息',
      form:{
        relName:'',
        specialized:'',
        stutyTime:'',
        createTime:'',
        sorce:'',
        vip:'',
        type:'',
        status:'',
        vipEnd:'',
        remarks:''
      },
      close:false,
      loading: true,
      ruleForm:'',
      tableData:[],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0//总记录数
      }
    }
  },
  created() {
    this.getData(this.pagination.currentPage,this.pagination.pageSize,this.ruleForm1)
  },
  methods:{
    rowStyle() {
      return "text-align:center";
    },
    getData(currentPage,pageSize,query){
      getStudent(currentPage,pageSize,query).then(req=>{
        this.tableData=req.data.records;
        this.loading = false
        this.pagination.currentPage=req.data.current
        this.pagination.pageSize=req.data.size
        this.pagination.total=req.data.total
      })
    },
    search(ruleFormName){
      this.$refs[ruleFormName].validate((valid) => {
        if (valid) {
          getStudent(this.pagination.currentPage,this.pagination.pageSize,this.ruleForm1).then(req => {
            console.log(req);
            if(req.data.records.length===0){
              this.$message.error("未查到相关数据")
            }else{
              this.tableData = req.data.records
              this.pagination.currentPage=req.data.current
              this.pagination.pageSize=req.data.size
              this.pagination.total=req.data.total
            }
          })
        } else {
          this.$message.error("数据校验失败")
          return false;
        }
      });
    },
    handleDelete(index,row) {
      this.$confirm("此操作删除当前数据，是否继续？","提示",{
        type:'info'
      }).then(()=> {
        deleteById(row.id)
        this.closeDialog(1)
      }).catch(()=>{
        this.$message.info("取消删除操作");
      });
    },
    closeDialog(currentPage){
      this.getData(currentPage,this.pagination.pageSize,this.ruleForm1)
      this.dialogFormVisible=false
      this.form={}
    },
    openDialog(){
      this.dialogFormVisible=true
    },
    insertBefore1(){
      this.addtitle = "添加学生信息"
      this.openDialog()
    },
    handleEdit(index,row){
      this.form=row;
      this.addtitle='编辑学生信息'
      this.openDialog()
    },
    edit(){
      if (this.form.status == true){
        this.form.status=0;
      }else{
        this.form.status=1
      }
      if (this.addtitle == "添加学生信息"){
        save(this.form)
      }else if (this.addtitle = "编辑学生信息") {
        updateById(this.form)
      }
      this.closeDialog(1)
    }
  }
}
</script>
<style scoped>
</style>
